<script>
// 核销明细模态表单页
Vue.component('arap-details', {
    template: `
<el-dialog title="核销明细" :visible.sync="dialogShow" width="1200px" @close="closeModal">
 <div class="recordListBox">
    <el-card class="box-card" style="cursor: initial;">
        <div slot="header" class="clearfix">
            <span>挂账核销清单 共计 {{recordList.length}} 条核销记录</span>
            <el-button type="primary" size="mini" @click="refresh" class="frBtn"><i class="el-icon-refresh" /> 刷新</el-button>
        </div>
        <div class="recordSearchBox" style="cursor: initial;">
        </div>
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="tally_time" sortable width="150px;" label="账单日期">
        <template slot-scope="scope">
        <p><i class="el-icon-time"></i>
        <span>{{ scope.row.tally_time.substring(0,10) }}</span>
        </p>
        <p>{{ scope.row.type_txt}} -{{ scope.row.category_name }} </p>
        </template>
        </el-table-column>
        <el-table-column prop="account_name" label="账户/金额">
        <template slot-scope="scope">
        <p v-if="scope.row.type==10" class="amount-in">
        + <span>{{ scope.row.amount }}</span>
        </p>
        <p v-if="scope.row.type==20" class="amount-out">
        - <span>{{ scope.row.amount }}</span>
        </p>
        <p v-if="scope.row.type==30" class="amount-trans">
        <span>{{ scope.row.amount }}</span>
        </p>
        <p v-if="scope.row.type==30">{{ scope.row.account_name}} <i class="el-icon-right"></i> {{ scope.row.account_dst_name}} </p>
        <p v-else>{{ scope.row.account_name}} </p>
        </template>
        </el-table-column>
        <el-table-column prop="store_name" width="100px" label="客户/供应商"></el-table-column>
        <el-table-column prop="project_name" label="项目"></el-table-column>
        <el-table-column prop="member_name" label="员工"></el-table-column>
        <el-table-column prop="memo" label="备注"></el-table-column>
        <el-table-column prop="extra" label="附件">
        <template slot-scope="scope">
        <span v-for="(item,iai) in scope.row.attachment" >
        <a :href="item.file_name" target="_blank" class="attachLink">
        附{{ ++iai }}
        </a>&nbsp;
        </span>
        </template>
        </el-table-column>
        <el-table-column prop="state_txt" label="状态"></el-table-column>
<el-table-column fixed="right" label="操作" v-if="currentTally.role!='cashier' && currentTally.role!='viewer' ">
        <template slot-scope="scope">
        <span class="recordOptBtn danger" v-if="!(scope.row.state!=0 && currentTally.role=='accountant')" @click="delRecord(scope.$index,scope.row)" style="cursor: pointer;">
        <i class="el-icon-delete-solid"></i>&nbsp; <span style="font-size:13px">删除</span>
        </span>
        </template>
        </el-table-column>
        </el-table>
        </template>
        </div>
        </el-card>
    </div>
</el-dialog>
    `,
    props: ['dialog-show', 'arap-id','arap-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally() {
            return this.$store.state.currentTally
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        arapId: {
            handler (newVal) {
                if(parseInt(newVal) > 0)  this.initData()
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            recordDialog:false,
            recordForm:{},
            recordList:[],
        }
    },
    methods:{
        closeModal(){
            this.$emit('modalClose')
        },
        modalClose(){
            this.recordDialog = false
        },
        initData() {
            this.getRecordList()
        },
        refresh() {
            this.getRecordList()
        },
        getRecordList(){
            let that = this
            let getParams = {
                tally_id : that.currentTallyId,
                id : that.arapId
            }
            axios.get('/api/tally-arap/details',{
                method: 'get',
                headers: {'token': loginToken},
                params: getParams
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.recordList = res.data.data
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        delRecord(index,row){
            let that = this
            this.$confirm('确定要删除该行记录？删除会重新计算该挂账记录的核销情况', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action === 'confirm') {
                        let postUrl = '/api/tally-record/del'
                        axios.post(postUrl,{id:row['id']},{
                            headers: {'token': loginToken},
                        }).then(function(res) {
                            if(res.data.status === 'success'){
                                that.$message({
                                    type: 'success',
                                    message: '操作成功~'
                                })
                                that.recordList.splice(index, 1)
                            }else{
                                that.$message({
                                    type: 'error',
                                    message: '解析数据失败:'+res.data.error_message
                                })
                            }
                        })
                    }
                }
            })
        }
    }
})
</script>
